<!DOCTYPE html>
<!doctype html>
<html lang="en">
    <head>
        <title>webGL</title>
        <script src="./glUtils.js"></script>
    </head>
<body>
<canvas width = "300" height = "300" id = "my_Canvas"></canvas>

   <script id="2d-vertex-shader" type="x-shader/x-vertex">
    attribute vec2 a_position;
    uniform vec2 u_resolution;

    void main() {
        // convert the rectangle from pixels to 0.0 to 1.0
        vec2 zeroToOne = a_position / u_resolution;
     
        // convert from 0->1 to 0->2
        vec2 zeroToTwo = zeroToOne * 2.0;
     
        // convert from 0->2 to -1->+1 (clipspace)
        vec2 clipSpace = zeroToTwo - 1.0;
     
        gl_Position = vec4(clipSpace, 0, 1);
    }
    </script>
    
    <script id="2d-fragment-shader" type="x-shader/x-fragment">
    void main() {
      gl_FragColor = vec4(0, 1, 0, 1);  // green
    }
    </script>    

<script>
    // Get A WebGL context
    var canvas = document.getElementById("my_Canvas");
    var gl = canvas.getContext("experimental-webgl");
    var utils=new GLUtils();
    // setup a GLSL program
    var program = utils.createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
    gl.useProgram(program);
    
    // look up where the vertex data needs to go.
    // var positionLocation = gl.getAttribLocation(program, "a_position");
    var positionLocation = gl.getUniformLocation(program, "u_resolution");
    gl.uniform2f(positionLocation, canvas.width, canvas.height);

    // Create a buffer and put a single clipspace rectangle in
    // it (2 triangles)
    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([
    10, 20,
    80, 20,
    10, 30,
    10, 30,
    80, 20,
    80, 30]),
    gl.STATIC_DRAW);

    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
    
    // draw
    gl.drawArrays(gl.TRIANGLES, 0, 6);   
</script>

</body>
</html>

